<template>
    <div class="i-table-no-border">
        <Form ref="form" :model="createData"  :label-width="80" label-position="right">
            <Row :gutter="24" type="flex">
                <Col>
                    <DatePicker type="daterange"  v-model="val" placement="bottom-start" placeholder="请输入治疗日期"  @on-change='submits' />
                </Col>
                <Col >
                    <FormItem prop="keywords">
                        <Input   placeholder="请输入患者姓名/诊疗号" clearable v-model="createData.keywords" @on-clear="handleSubmit(1)" @on-enter='handleSubmit(0)'  />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="诊室" prop="personnel" label-for="personnel">
                    <Select v-model="createData.clinic_id"  placeholder="请选择诊室" element-id="personnel" clearable @on-change='getDatas' >
                        <Option  v-for="item in clinic" :key="item.value" :value="item.value" :disabled="+item.status === 0">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="治疗项目" prop="disease" label-for="disease">
                    <Select v-model="createData.clinic_project_id" placeholder="请选择治疗项目" element-id="diagnosis" clearable @on-change='getDatas' >
                        <Option v-for="item in clinic_project" :key="item.value" :value="item.value"  :disabled="+item.status === 0">{{ item.title }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem label="就诊类型" prop="disease" label-for="disease">
                    <Select v-model="createData.outpatient_type" placeholder="请选择就诊类型" element-id="diagnosis" clearable @on-change='getDatas' >
                        <Option v-for="item in hqdata" :key="item.id" :value="item.id" :disabled="+item.status === 0" >{{ item.name }}</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading" >
            <template slot-scope="{ row }" slot="info">
                <span >{{ row.name }} , {{ row.gender }} ,{{ row.age }}岁</span>
            </template>
            <template slot-scope="{ row }" slot="diagnosis">
                <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
            </template>
            <template slot-scope="{ row }" slot="label">
                <Poptip word-wrap trigger="hover" placement="right" width="400">
                    <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index" v-if="index < 3">{{ item }}</Tag>
                    <div slot="content">
                        <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                    </div>
                </Poptip>
            </template>
            <template slot-scope="{ row }" slot="patient_card_id">
                <span v-if="row.patient_card_id">
                    <span v-if="row.patient_card_id.length < 15">
                        {{row.patient_card_id}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200" :content="row.remark">
                        {{row.patient_card_id.substring(0, 14)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="operate_name">
                <span v-if="row.operate_name">
                    <span v-if="row.operate_name.length < 4">
                        {{row.operate_name}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200" :content="row.operate_name">
                        {{row.operate_name.substring(0, 3)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="channel">
                <Badge status="success" :text="row.source_name" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <a @click="handleOpenDrawer(row)">详细</a>
                <Divider type="vertical"/>
                <a @click="handleOpenSubmit(row)">编辑剩余</a>
            </template>
            <template slot-scope="{ row }" slot="remark">
                <Tooltip
                        :content="row.remark"
                        :delay="500"
                        placement="left"
                        theme="light"
                        max-width="500"
                        :word-wrap="true"
                        :transfer="true"
                >
                    <span style="font-size: 12px">{{  row.remark && row.remark.length > 14 ? row.remark.slice(0, 14) +  '...' : row.remark }}</span>
                </Tooltip>
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page
                    :total="total"
                    :current.sync="createData.page"
                    show-total
                    show-elevator
                    @on-change="handleChangePage"
                    :page-size="createData.pageSize"
                    :page-size-opts="pageOpts"
                    show-sizer transfer
                    @on-page-size-change="handleChangePageSize"
            />
        </div>
        <edit-patient ref="editPatient" @ok="getData"/>
        <table-model ref="editModel" @close="closeEdit"/>
    </div>
</template>
<script>
    import { PatientsTreated } from '@/api/patient'
    import tableModel from './visitModel/table-model'
    import EditPatient from './modules/editPatient'
    import { mapActions } from 'vuex';
    import dayjs from 'dayjs'
    export default {
        components: {
            EditPatient,
            tableModel
        },
        data () {
            return {
                createData: {
                    clinic_id: '',
                    clinic_project_id: '',
                    outpatient_type: '',
                    start_time: '',
                    end_time: '',
                    keywords: '',
                    page: 1,
                    pageSize: 10
                },
                total: 0,
                pageOpts: [10, 20, 30, 50],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                loading: false,
                columns: [
                    {
                        title: '基本信息',
                        slot: 'info',
                        minWidth: 130
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        slot: 'patient_card_id',
                        minWidth: 130
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80
                    },
                    {
                        title: '最近治疗时间',
                        key: 'recently_clinic_time',
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: '操作人',
                        key: 'operate_name',
                        slot: 'operate_name',
                        minWidth: 80
                    },
                    {
                        title: '最近治疗项目',
                        key: 'clinic_project_name',
                        minWidth: 130
                    },
                    {
                        title: '操作',
                        minWidth: 130,
                        slot: 'action'
                    }
                ],
                data: [],
                typeList: [],
                labelList: [],
                clinic: [],
                clinic_project: [],
                val: [],
                hqdata: []
            }
        },
        created () {
            // let jumpPage = window.localStorage.getItem('jumpDetail')
            // if (jumpPage) {
            //     let parsePage = JSON.parse(jumpPage)
            //     this.createData.belong_assistant_id = parsePage.belong.toString()
            // }
            this.getData()
        },
        destroyed () {
            window.localStorage.removeItem('jumpDetail')
        },
        computed: {
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            ...mapActions('admin/page', ['setPatientDetail']),
            // 获取数据
            getData () {
                this.loading = true
                PatientsTreated(this.createData).then(res => {
                    this.total = res.list.total
                    this.data = res.list.list
                    this.clinic = res.clinic
                    this.clinic_project = res.clinic_project
                    this.hqdata = res.outpatient_type
                }).finally(() => {
                    this.loading = false
                })
            },
            getDatas () {
                this.createData.page = 1
                this.getData()
            },
            // onSearchItem () {
            //     if (this.createData.keywords === '') {
            //         this.createData.clinic_id = ''
            //         this.createData.clinic_project_id = ''
            //         this.createData.outpatient_type = ''
            //         this.createData.start_time = ''
            //         this.createData.end_time = ''
            //         this.createData.page = 1
            //         this.createData.pageSize = 10
            //         this.getData()
            //     }
            // },
            submits () {
                if (this.val[0] === '' && this.val[1] === '') {
                    this.createData.start_time = ''
                    this.createData.end_time = ''
                } else if (this.val === '') {
                    this.createData.start_time = ''
                    this.createData.end_time = ''
                } else {
                    let data = new Date(this.val[0])
                    let data1 = new Date(this.val[1])
                    this.createData.start_time = data.getFullYear() + '-' + (parseInt(data.getMonth()) + 1) + '-' + data.getDate()
                    this.createData.end_time = data1.getFullYear() + '-' + (parseInt(data1.getMonth()) + 1) + '-' + data1.getDate()
                }
                this.getData()
            },
            // 切换分页
            handleChangePage (e) {
                this.createData.page = e
                this.getData()
            },
            handleDetailPatient (row) {
                this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 2 })
                this.$router.push('/patient/detail')
            },
            // 编辑
            handleOpenDrawer (row) {
                this.$refs.editPatient.handleOpenDrawer(row.patient_card_id, 2)
            },
            // 回访
            handleOpenSubmit (row) {
                this.$refs.editModel.handleShow(row, this.typeList, this.labelList)
            },
            // 切换分页条数
            handleChangePageSize (e) {
                this.createData.pageSize = e
                this.getData()
            },
            // 提交
            handleSubmit (type) {
                if (type === 1) {
                    this.createData.keywords = ''
                }
                if (this.createData.keywords !== '') {
                    this.val = []
                    this.createData.clinic_id = ''
                    this.createData.clinic_project_id = ''
                    this.createData.outpatient_type = ''
                    this.createData.start_time = ''
                    this.createData.end_time = ''
                    this.createData.page = 1
                    this.createData.pageSize = 10
                }
                this.getData()
            },
            closeEdit (val) {
                if (val) {
                    this.getData();
                }
            }
        }
    }
</script>
<style scoped lang="less">
  .blueStatus {
    line-height: 20px;
    background: #e6fffb;
    border-color: #87e8de;
    font-size: 12px;
    color: #13c2c2 !important;
  }
  .modeLeft {
    margin-left: 10px;
  }
</style>
